<!-- 相似问法 -->
<template>
    <el-dialog title="相似问法编辑" :visible.sync="similarQuestion" :before-close="cancel" width="980px" class="similarQuestion" destroy-on-close>
        <div class="addHeader">
            <el-input v-model="similarInput" placeholder="请输入具体问法" size="small">
                <el-button size="small" type="primary" slot="append" @click="addQuestion(similarInput)">添加</el-button>
            </el-input>
        </div>
        <div style="margin: 15px 0">
            <el-button size="small" type="primary" plain @click="genSim">智能推荐问法</el-button>
            <el-button size="small" type="primary" plain @click="importShow = !importShow">批量添加</el-button>
            <el-button size="small" plain @click="batchDel">批量删除</el-button>
        </div>
        <div class="simQueBox">
            <div class="check flexbetween">
                <div class="allCheck">
                    <el-checkbox v-model="checkAll" @change="similarCheckAll"></el-checkbox>
                    <span>相似问法</span>
                </div>
                <el-input placeholder="输入搜索" size="small" style="width: 300px" v-model="searchInput">
                    <span slot="suffix" class="iconfont icon-sousuo" @click="searchQuestion"></span>
                </el-input>
            </div>
            <el-scrollbar style="height: 370px">
                <div v-for="(item,index) in questionList" :key="index" class="simQueItem">
                    <div class="label">
                        <el-checkbox v-model="item.checked" @change="similarChange"></el-checkbox>
                        <el-input v-model="item.editTitle" v-show="item.isEdit" size="small" />
                        <p :title="item.title" @dblclick="item.isEdit = true" v-show="!item.isEdit">{{item.title}}</p>
                    </div>
                    <div class="operation" v-show="item.isEdit">
                        <el-button size="mini" @click="editSubmit(index)">确定</el-button>
                        <el-button size="mini" @click="editCancel(index)">取消</el-button>
                    </div>
                    <div class="operation" v-show="!item.isEdit">
                        <el-tooltip effect="light" content="复制" placement="top" :enterable="false">
                            <span class="iconfont icon-fuzhi" @click="copyQuestion(index)"></span>
                        </el-tooltip>
                        <el-tooltip effect="light" content="删除" placement="top" :enterable="false">
                            <span class="iconfont icon-shanchu" @click="delQuestion(item.id)"></span>
                        </el-tooltip>
                    </div>
                </div>
            </el-scrollbar>

        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" size="small" type="text">取 消</el-button>
            <el-button @click="cancel" type="primary" size="small">确 定</el-button>
        </span>

        <!-- 批量添加相似问法 -->
        <import id="similarImport" :importShow.sync="importShow" :importConfig="importConfig" @importSuccess="importSuccess" />

        <!-- 智能推荐 -->
        <el-dialog width="980px" title="智能推荐相似问法" :visible.sync="recommendVisible" :before-close="recommendCancel" append-to-body
                   class="recommendQuestion">
            <div class="recommendTitle">
                <p><span>标准问法</span><span class="question" :title="question">{{question}}</span></p>
                <p><span>系统推荐问法</span>请勾选意图正确的推荐问法批量加入</p>
            </div>
            <div class="tjQueBox" v-loading="recommendLoading">
                <div class="check flexbetween">
                    <div class="allCheck">
                        <!-- <el-checkbox v-model="recommendCheckAll" @change="recommendChange">全选</el-checkbox> -->
                        <el-checkbox v-model="recommendCheckAll" @change="recommendChange"></el-checkbox>
                        <span>全选</span>
                    </div>
                    <!-- <div>
                        <el-button type="primary" size="small" plain :disabled="pageNo == 1" @click="prevPage">上一页</el-button>
                        <el-button type="primary" size="small" plain @click="nextPage">下一页</el-button>
                    </div> -->
                </div>
                <div style="height: 370px;overflow-y: scroll">
                    <el-checkbox-group v-model="recommendChecked" @change="handleRecommendChange">
                        <div class="tjQueItem" v-for="(item,i) in recommendList" :key="i">
                            <el-checkbox :label="item"><span></span></el-checkbox>
                            <p>{{item}}</p>
                        </div>
                    </el-checkbox-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="recommendCancel" size="small" type="text">取 消</el-button>
                <el-button @click="recommendSubmit" type="primary" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </el-dialog>
</template>

<script>
import Import from "@/components/Import";
import { findSimilarQuestion, addSimilarQuestion, editSimilarQuestion, delSimilarQuestion, genSim, batchAddSimilarQue } from "@/api/knowledge"
export default {
    name: "similarQuestion",
    props: {
        similarQuestion: Boolean,
        isReport: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    data() {
        return {
            recommendVisible: false,
            recommendLoading: false,
            similarInput: "",
            searchInput: "",
            question: "",
            questionId: "",
            questionList: [],
            checkAll: false,
            pageNo: 1,
            recommendCheckAll: false,
            recommendList: [],
            recommendChecked: [],
            recommendStorage: [],
            importShow: false,
            importConfig: {
                css: {
                    "top": "50%",
                    "left": "50%",
                    "transform": "translate(-50%, -50%)"
                },
                title: "下载相似问法导入模板，根据模板的格式填写相似问法，填写完成后，一键导入",
                downloadUrl: "/static/download/相似问法导入模板.xlsx",
                importUrl: "/v1/admin/question/importSimilarQuestion",
                importParam: {
                    questionId: ""
                }
            },
        }
    },
    methods: {
        //获取相似问题列表
        findSimilarQuestion(data) {
            if (data) {
                this.questionId = data.id;
                this.question = data.question;
                this.importConfig.importParam.questionId = data.id;
            }
            this.checkAll = false;
            var param = {
                questionId: this.questionId,
                pageNo: 1,
                pageSize: 999
            }
            findSimilarQuestion(param).then(resp => {
                var list = resp.data.list || [];
                this.questionList = [];
                list.forEach(item => {
                    this.questionList.push(
                        {
                            id: item.id,
                            checked: false,
                            isEdit: false,
                            title: item.simQuestion,
                            editTitle: item.simQuestion,
                        });
                });
            });
        },
        searchQuestion() {
            if (this.searchInput != "") {
                this.questionList = this.questionList.filter(item => {
                    return item.title.indexOf(this.searchInput) > -1;
                });
            } else {
                this.findSimilarQuestion();
            }
        },
        //添加问题
        addQuestion(simQuestion) {
            if (simQuestion.length < 2 || simQuestion.length > 200) {
                return this.$antMessage.warning("问题长度为2-200！");
            }
            addSimilarQuestion({ questionId: this.questionId, simQuestion: simQuestion }).then(resp => {
                if (resp.status == 0) {
                    this.$antMessage.success("添加成功");
                    this.similarInput = "";
                    this.findSimilarQuestion();
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        cancel() {
            this.pageNo = 1;
            this.questionId = this.similarInput = "";
            this.checkAll = this.recommendCheckAll = false;
            this.recommendChecked = this.recommendStorage = [];
            //报表统计
            // if (this.isReport) {
            this.$parent.getQueList();
            // }
            this.$emit("update:similarQuestion", false);
        },
        //编辑取消
        editCancel(i) {
            if (this.questionList[i].id) {
                this.questionList[i].editTitle = this.questionList[i].title;
                this.questionList[i].isEdit = false;
            } else {
                this.questionList.splice(i, 1);
            }
        },
        //编辑问题
        editSubmit(i) {
            var title = this.questionList[i].editTitle;
            if (title.length < 2 || title.length > 200) {
                return this.$antMessage.warning("问题长度为2-200！");
            }
            if (this.questionList[i].id) {
                this.questionList[i].title = title;
                this.questionList[i].isEdit = false;
                var param = { id: this.questionList[i].id, simQuestion: title };
                editSimilarQuestion(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("编辑成功");
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            } else {
                this.addQuestion(title);
            }
        },
        //复制问题
        copyQuestion(i) {
            var obj = { ...this.questionList[i] }
            obj.isEdit = true;
            obj.id = "";
            this.questionList.push(obj);
        },
        //删除问题
        delQuestion(id) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delSimilarQuestion({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.findSimilarQuestion();
                    } else {
                        this.$antMessage.warning("删除失败");
                    }
                });
            }).catch();
        },
        //批量添加
        importSuccess() {
            this.findSimilarQuestion();
        },
        //批量删除相似问题
        batchDel() {
            var delList = this.questionList.filter(item => item.checked == true);
            if (delList.length == 0) {
                this.$antMessage.warning("请先选择要批量删除的问题!");
            } else {
                var ids = [];
                delList.forEach(item => ids.push(item.id));
                this.delQuestion(ids.join(","));
                this.checkAll = false;
            }
        },
        similarCheckAll(val) {
            if (val) {
                this.questionList.map(item => {
                    item.checked = true;
                });
            } else {
                this.questionList.map(item => {
                    item.checked = false;
                });
            }
        },
        similarChange() {
            let checkedCount = (this.questionList.filter(item => item.checked == true)).length;
            this.checkAll = checkedCount === this.questionList.length;
        },
        recommendChange(isChecked) {
            if (isChecked) {
                this.recommendList.forEach(item => {
                    if (this.recommendChecked.indexOf(item) == -1) {
                        this.recommendChecked.push(item);
                    }
                });
            } else {
                this.recommendChecked = [];
            }
        },
        handleRecommendChange(value) {
            let checkedCount = value.length;
            this.recommendCheckAll = checkedCount === this.recommendList.length;
            this.recommendStorage[this.pageNo - 1] = value;
        },
        //上一页
        prevPage() {
            this.recommendCheckAll = false;
            this.recommendStorage[this.pageNo - 1] = this.recommendChecked;
            this.pageNo -= 1;
            this.recommendChecked = this.recommendStorage[this.pageNo - 1] || [];
        },
        //下一页
        nextPage() {
            this.recommendCheckAll = false;
            this.recommendStorage[this.pageNo - 1] = this.recommendChecked;
            this.pageNo += 1;
            this.recommendChecked = this.recommendStorage[this.pageNo - 1] || [];
        },
        recommendSubmit() {
            var simQuestionList = this.recommendStorage.flat();
            if (simQuestionList.length == 0) {
                return this.$antMessage.warning("请至少选择一个推荐问法");
            }
            var param = {
                questionId: this.questionId,
                simQuestionList: simQuestionList
            }
            batchAddSimilarQue(param).then(resp => {
                if (resp.status == 0) {
                    this.$antMessage.success("添加成功");
                    this.recommendCancel();
                    this.findSimilarQuestion();
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        recommendCancel() {
            this.pageNo = 1;
            this.recommendVisible = this.recommendCheckAll = false;
            this.recommendStorage = this.recommendChecked = [];
        },
        genSim() {
            this.recommendVisible = this.recommendLoading = true;
            genSim({ question: this.question }).then(resp => {
                this.recommendLoading = false;
                if (resp.status == 0) {
                    this.recommendList = resp.data || [];
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        }
    },
    components: {
        Import
    }
}
</script>

<style lang="scss">
.similarQuestion {
    .el-dialog {
        height: 680px;
        .el-dialog__body {
            overflow: hidden;
        }
    }
    .addHeader {
        display: flex;
        .el-button {
            flex-shrink: 0;
            width: 70px;
            border-color: #6b5ee2;
            background: #6b5ee2;
            color: #fff;
            border-radius: 0 6px 6px 0;
            height: 34px;
        }
        .el-input-group__append {
            border: none;
            vertical-align: inherit;
        }
    }
    .simQueBox {
        border: 1px solid #dae1e9;
        border-radius: 6px;
        .check {
            height: 48px;
            background: #f5f7fa;
            padding: 0 20px 0 15px;
            border-radius: 6px;
            .allCheck {
                flex-shrink: 0;
                > span {
                    color: #363c43;
                    font-size: 14px;
                    margin-left: 15px;
                }
            }
            .icon-sousuo {
                font-size: 22px;
                color: #b7c1c9;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        .simQueItem {
            height: 48px;
            display: flex;
            align-items: center;
            padding: 0 20px 0 15px;
            border-top: 1px solid #dae1e9;
            .label {
                flex: 1;
                display: flex;
                align-items: center;
                p {
                    color: #676e75;
                    margin: 0 15px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .el-input {
                    margin: 0 10px;
                }
            }
            .operation {
                flex-shrink: 0;
                .iconfont {
                    font-size: 24px;
                    color: #b7c1c9;
                    margin-left: 16px;
                    cursor: pointer;
                    &:hover {
                        color: #abb4bc;
                    }
                }
            }
        }
    }
}
.recommendQuestion {
    .el-dialog {
        height: 680px;
        .el-dialog__body {
            overflow: hidden;
        }
    }
    .recommendTitle {
        p {
            display: flex;
            font-size: 14px;
            margin-bottom: 20px;
            margin-left: 15px;
            span {
                display: inline-block;
                width: 85px;
                text-align: right;
                color: #363c43;
                margin-right: 20px;
            }
            .question {
                text-align: left;
                color: #676e75;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
            }
        }
    }
    .tjQueBox {
        border: 1px solid #dae1e9;
        border-radius: 6px;
        .check {
            height: 48px;
            background: #f5f7fa;
            padding: 0 20px 0 15px;
            border-radius: 6px;
            .allCheck {
                flex-shrink: 0;
                > span {
                    color: #363c43;
                    font-size: 14px;
                    margin-left: 15px;
                }
            }
        }
        .tjQueItem {
            height: 48px;
            display: flex;
            align-items: center;
            padding: 0 20px 0 15px;
            border-top: 1px solid #dae1e9;
            > p {
                font-size: 14px;
                color: #676e75;
                margin-left: 6px;
            }
        }
    }
}
</style>